<template>
  <div class="app-container">
    <div style="margin-bottom: 20px">
      <el-button  type="success" @click="addHandler">
        添加疾病
      </el-button>
      <el-input style="width: 200px; margin-left: 10px"
                placeholder="请输入名字"
                prefix-icon="el-icon-search"
                v-model="searchValue">
      </el-input>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      :default-sort="{ prop: 'date', order: 'ascending' }"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column align="center" prop="date" label="ID" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column width="105px" align="center" label="名字">
        <template slot-scope="scope">
          <span v-text="scope.row.diseaseName"></span>
        </template>
      </el-table-column>

      <el-table-column width="300px" align="center" label="疾病描述">
        <template slot-scope="scope">
          <span>🕷 {{ scope.row.description }}</span>
        </template>
      </el-table-column>

      <el-table-column width="280px" min-width="140px" label="疾病防治">
        <template slot-scope="scope">
          <span>🚑 {{ scope.row.prevention }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">

          <el-button @click="editHandler(scope.row)" type="primary" size="mini" icon="el-icon-edit">
            修改
          </el-button>

          <el-button
            style="margin-left: 10px"
            type="danger"
            size="mini"
            icon="el-icon-edit"
            @click="deleteDisease(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <el-dialog :title="isEdit?'疾病修改':'疾病添加'" :visible.sync="dialogFormVisible">
      <el-form ref="diseaseForm" :model="diseaseForm" label-width="80px">
        <el-form-item label="名称">
          <el-input :require="true" v-model="diseaseForm.diseaseName"></el-input>
        </el-form-item>
        <el-form-item label="疾病描述">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="请输入内容"
            v-model="diseaseForm.description"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="防治描述">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="请输入内容"
            v-model="diseaseForm.prevention"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button  @click="onCancle" >取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import {getAllDiseaseMsg,deleteDisease,updateDisease,insertDiseaseType} from "@/api/disease";
import {formatDate} from "@/utils/date";
export default {
  name: "DiseaseMent",
  components: {Pagination},
  created() {
    this.getList()
  },
  data(){
    return{
      dialogFormVisible: false,
      list: null,
      payloadList: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 8
      },
      formLabelWidth: 120,
      diseaseForm:{
        id:"",
        diseaseName:"",
        description:"",
        prevention:"",
      },
      isEdit:false,
      searchValue:"",
    }
  },
  watch:{
    listQuery:{
      handler(){
        this.getList()
      },
      deep:true
    },
    searchValue:{
      handler(){
        this.search()
      },
      deep:true
    }
  },
  methods:{
    search(){
      console.log(this.searchValue)
      if(this.searchValue == "") {
        this.list=this.payloadList
      }else{
        this.list=this.payloadList.filter(item=>{
          return item.diseaseName.indexOf(this.searchValue)!= -1
        })
      }
    },
    onSubmit(){
      if(this.diseaseForm.diseaseName === ""){
        this.$message.error("名称不能为空");
        return;
      }
      if(this.diseaseForm.description === ""){
        this.$message.error("描述不能为空");
        return;
      }
      if(this.diseaseForm.prevention === ""){
        this.$message.error("疾病防治不能为空");
        return;
      }

      if(this.isEdit){
        updateDisease(this.diseaseForm).then(res=>{
          if(res.code == 200){
            this.dialogFormVisible = false;
            this.$message.success("更新成功");
            this.getList();
          }else{
            this.$message.error("更新失败");
          }
        })
      }else{
        insertDiseaseType(this.diseaseForm).then(res=>{
          if(res.code == 200){
            this.dialogFormVisible = false;
            this.$message.success("添加成功");
            this.getList();
          }else{
            this.$message.error("添加失败");
          }
        })
      }
    },
    onCancle(){
      this.dialogFormVisible = false;
    },
    setImg(url){
      console.log(url)
      this.form.img = url;
    },
    getStyles() {

      //生成随机颜色
      let max = 8;
      let min = 1;

      let x = Math.floor(Math.random() * (max - min + 1)) + min;

      const backcolor = "randomColor" + x;

      if (backcolor == "randomColor1") {
        return "background-image: linear-gradient( 135deg, #ABDCFF 10%, #0396FF 100%);"
      }
      if (backcolor == "randomColor2") {
        return "background-image: linear-gradient( 135deg, #FEB692 10%, #EA5455 100%);"
      }
      if (backcolor == "randomColor3") {
        return "background-image: linear-gradient( 135deg, #CE9FFC 10%, #7367F0 100%);"
      }
      if (backcolor == "randomColor4") {
        return "background-image: linear-gradient( 135deg, #90F7EC 10%, #32CCBC 100%);"
      }
      if (backcolor == "randomColor5") {
        return "background-image: linear-gradient( 135deg, #81FBB8 10%, #28C76F 100%);"
      }
      if (backcolor == "randomColor6") {
        return "background-image: linear-gradient( 135deg, #E2B0FF 10%, #9F44D3 100%);"
      }
      if (backcolor == "randomColor7") {
        return "background-image: linear-gradient( 135deg, #5EFCE8 10%, #736EFE 100%);"
      }
      if (backcolor == "randomColor8") {
        return "background-image: linear-gradient( 135deg, #FFD3A5 10%, #FD6585 100%);"
      }


      return "background-image: linear-gradient( 135deg, #FFD3A5 10%, #FD6585 100%);"
    },
    addHandler(){
      this.chooseDisease = [];
      this.dialogFormVisible = true;
      this.isEdit = false;
      this.diseaseForm={
        id:"",
        diseaseName:"",
        description:"",
        prevention:"",
      }
    },
    editHandler(form){
      this.dialogFormVisible = true;
      this.diseaseForm = form;
      this.isEdit = true;
    },


    deleteDisease(id) {
      this.$confirm('此操作将永久删除是否确认删除？', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonClass: "danger",
        confirmButtonText: '删除',
        cancelButtonText: '放弃删除'
      })
        .then(() => {
          deleteDisease(id).then(resp => {
            this.$notify({
              title: '成功',
              message: '您已成功删除该内容',
              type: 'success'
            });
            //刷新当前页面
            this.getList()
          })
        })
    },

    async getList() {
      this.listLoading = true

      getAllDiseaseMsg(this.listQuery).then(resp => {
        this.payloadList = this.list = resp.data.data
        this.total = resp.data.total
        this.listLoading = false
      })

    }
  }
}
</script>

<style scoped>

</style>
